<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="为什么会有 TypeScript随着近几年前端领域的快速发展，让 JavaScript 迅速被普及和受广大开发者的喜爱，借助于 JavaScript 本身的强大，也让使用 JavaScript 开发的人员越来越多。 但是 JavaScript 一个非常大的缺点：没有类型检测 类型缺失带来的问题编程开发中我们有一个共识：错误出现的越早越好 JavaScript 并不能在代码编译阶段发现代码的错误，如">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript 入门指南">
<meta property="og:url" content="https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/index.html">
<meta property="og:site_name" content="柯里的语法糖">
<meta property="og:description" content="为什么会有 TypeScript随着近几年前端领域的快速发展，让 JavaScript 迅速被普及和受广大开发者的喜爱，借助于 JavaScript 本身的强大，也让使用 JavaScript 开发的人员越来越多。 但是 JavaScript 一个非常大的缺点：没有类型检测 类型缺失带来的问题编程开发中我们有一个共识：错误出现的越早越好 JavaScript 并不能在代码编译阶段发现代码的错误，如">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-02-05T06:19:40.058Z">
<meta property="article:modified_time" content="2022-02-05T06:19:40.059Z">
<meta property="article:author" content="柯里的语法糖">
<meta property="article:tag" content="TypeScript">
<meta name="twitter:card" content="summary">
    
    
      
        
          <link rel="shortcut icon" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico">
        
      
    
    <!-- title -->
    <title>TypeScript 入门指南</title>
    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">

    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.0.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="Menu"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="Menu"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="Top" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/tags/">标签</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="上一篇" href="/2022/02/05/algorithm/binarySearch/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="下一篇" href="/2022/02/05/JavaScript/throttle/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="返回顶部" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="分享文章" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&text=TypeScript 入门指南"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&is_video=false&description=TypeScript 入门指南"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=TypeScript 入门指南&body=Check out this article: https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&name=TypeScript 入门指南&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&t=TypeScript 入门指南"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E6%9C%89-TypeScript"><span class="toc-number">1.</span> <span class="toc-text">为什么会有 TypeScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E7%BC%BA%E5%A4%B1%E5%B8%A6%E6%9D%A5%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">类型缺失带来的问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-%E6%B7%BB%E5%8A%A0%E7%B1%BB%E5%9E%8B%E7%BA%A6%E6%9D%9F"><span class="toc-number">3.</span> <span class="toc-text">JavaScript 添加类型约束</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-TypeScript"><span class="toc-number">4.</span> <span class="toc-text">什么是 TypeScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript-%E7%9A%84%E7%BC%96%E8%AF%91%E7%8E%AF%E5%A2%83"><span class="toc-number">5.</span> <span class="toc-text">TypeScript 的编译环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript-%E7%9A%84%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="toc-number">6.</span> <span class="toc-text">TypeScript 的运行环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">7.</span> <span class="toc-text">变量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E5%A3%B0%E6%98%8E"><span class="toc-number">7.1.</span> <span class="toc-text">变量的声明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E7%B1%BB%E5%9E%8B%E6%8E%A8%E6%96%AD%EF%BC%88%E6%8E%A8%E5%AF%BC%EF%BC%89"><span class="toc-number">7.2.</span> <span class="toc-text">变量的类型推断（推导）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.</span> <span class="toc-text">数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#number-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.1.</span> <span class="toc-text">number 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#boolean-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.2.</span> <span class="toc-text">boolean 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#string-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.3.</span> <span class="toc-text">string 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.4.</span> <span class="toc-text">数组类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#object-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.5.</span> <span class="toc-text">object 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#symbol-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.6.</span> <span class="toc-text">symbol 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#null-%E5%92%8C-undefined"><span class="toc-number">8.7.</span> <span class="toc-text">null 和 undefined</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#any-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.8.</span> <span class="toc-text">any 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unknown-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.9.</span> <span class="toc-text">unknown 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#void-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.10.</span> <span class="toc-text">void 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#never-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.11.</span> <span class="toc-text">never 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#tuple-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.12.</span> <span class="toc-text">tuple 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.13.</span> <span class="toc-text">联合类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">8.14.</span> <span class="toc-text">类型别名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">8.15.</span> <span class="toc-text">类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9D%9E%E7%A9%BA%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">8.16.</span> <span class="toc-text">非空类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E9%93%BE"><span class="toc-number">8.17.</span> <span class="toc-text">可选链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">8.18.</span> <span class="toc-text">!!运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6-1"><span class="toc-number">8.19.</span> <span class="toc-text">??运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.20.</span> <span class="toc-text">字面量类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E6%8E%A8%E7%90%86"><span class="toc-number">8.21.</span> <span class="toc-text">字面量推理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E4%BF%9D%E6%8A%A4%EF%BC%88type-guard%EF%BC%89"><span class="toc-number">8.22.</span> <span class="toc-text">类型保护（type guard）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9B%B8%E5%85%B3"><span class="toc-number">9.</span> <span class="toc-text">函数相关</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E5%92%8C%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="toc-number">9.1.</span> <span class="toc-text">函数的参数和返回值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-number">9.2.</span> <span class="toc-text">匿名函数的参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%97%E7%9A%84%E5%8F%82%E6%95%B0%E4%B8%BA%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.3.</span> <span class="toc-text">接受的参数为对象类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.4.</span> <span class="toc-text">可选类型</span></a></li></ol></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        TypeScript 入门指南
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">柯里的语法糖</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2022-02-05T06:19:40.058Z" itemprop="datePublished">2022-02-05</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fas fa-archive"></i>
        <a class="category-link" href="/categories/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6/">前端进阶</a>
    </div>


      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link-link" href="/tags/TypeScript/" rel="tag">TypeScript</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h2 id="为什么会有-TypeScript"><a href="#为什么会有-TypeScript" class="headerlink" title="为什么会有 TypeScript"></a>为什么会有 TypeScript</h2><p>随着近几年前端领域的快速发展，让 JavaScript 迅速被普及和受广大开发者的喜爱，借助于 JavaScript 本身的强大，也让使用 JavaScript 开发的人员越来越多。</p>
<p>但是 JavaScript 一个非常大的缺点：<strong>没有类型检测</strong></p>
<h2 id="类型缺失带来的问题"><a href="#类型缺失带来的问题" class="headerlink" title="类型缺失带来的问题"></a>类型缺失带来的问题</h2><p>编程开发中我们有一个共识：<strong>错误出现的越早越好</strong></p>
<p>JavaScript 并不能在代码编译阶段发现代码的错误，如果此时我们给 JavaScript 加上限制，在开发阶段就能避免很多问题。</p>
<h2 id="JavaScript-添加类型约束"><a href="#JavaScript-添加类型约束" class="headerlink" title="JavaScript 添加类型约束"></a>JavaScript 添加类型约束</h2><p>为了弥补 JavaScript 类型约束上的缺陷，增加类型约束，很多公司推出了自己的方案：</p>
<ul>
<li>2014 年，Facebook 推出了 flow 来对 JavaScript 进行类型检查</li>
<li>同年，Microsoft 微软也推出了 TypeScript1.0 版本</li>
</ul>
<p>而现在，无疑 TypeScript 已经完全胜出：</p>
<h2 id="什么是-TypeScript"><a href="#什么是-TypeScript" class="headerlink" title="什么是 TypeScript"></a>什么是 TypeScript</h2><p>将官方文档的说法翻译过来是这样的：</p>
<blockquote>
<p>TypeScript 是拥有类型的 JavaScript 超集，它可以编译成普通、干净、完整的 JavaScript 代码</p>
</blockquote>
<p>我们可以将 TypeScript 理解成加强版的 JavaScript：</p>
<ul>
<li><p>JavaScript 所拥有的特性，TypeScript 全部都是支持的，并且它紧随 ECMAScript 的标准，所以 ES6、ES7、ES8 等新语法标准，它都是支持的；</p>
</li>
<li><p>在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等</p>
</li>
<li><p>TypeScript 最终会被编译成 JavaScript 代码，所以你并不需要担心它的兼容性问题，在编译时也不需要借助于 Babel 这样的工具</p>
</li>
</ul>
<h2 id="TypeScript-的编译环境"><a href="#TypeScript-的编译环境" class="headerlink" title="TypeScript 的编译环境"></a>TypeScript 的编译环境</h2><p>TypeScript 最终会被编译成 JavaScript 来运行，因此我们需要搭建对应的环境。</p>
<p>通过安装 TypeScript 可以通过 TypeScript 的 Compiler 将其编译为 JavaScript</p>
<blockquote>
<p>npm install typescript</p>
</blockquote>
<h2 id="TypeScript-的运行环境"><a href="#TypeScript-的运行环境" class="headerlink" title="TypeScript 的运行环境"></a>TypeScript 的运行环境</h2><p>如果每次修改 ts 代码后都需要经过 tsc 编译，然后通过 node 或者浏览器来运行，未免显得有些繁琐。</p>
<p>有以下两种解决方法：</p>
<ol>
<li><p>通过 webpack，配置本地的 TypeScript 编译环境和本地服务，直接运行在浏览器上</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span>,</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/main.ts&quot;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&quot;./dist&quot;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bundle.js&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">extensions</span>: [<span class="string">&quot;.ts&quot;</span>, <span class="string">&quot;.js&quot;</span>],</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.ts$/</span>,</span><br><span class="line">        loader: <span class="string">&quot;ts-loader&quot;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./index.html&quot;</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">  ],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
<li><p>通过 ts-node 库，为 TypeScript 的运行提供执行环境<br>安装：</p>
<blockquote>
<p>npm install ts-node -g<br>npm install tslib @types/node -g</p>
</blockquote>
<p>通过 ts-node 运行：</p>
<blockquote>
<p>ts-node ts 文件</p>
</blockquote>
</li>
</ol>
<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><h3 id="变量的声明"><a href="#变量的声明" class="headerlink" title="变量的声明"></a>变量的声明</h3><p>在 TypeScript 中定义变量需要指定标识符的类型</p>
<p>声明了类型后 TypeScript 就会进行类型检测，声明的类型可以称之为类型注解</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span>/<span class="keyword">let</span>/<span class="keyword">const</span> 标识符: 数据类型 = 赋值</span><br></pre></td></tr></table></figure>

<p>例子：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> username: <span class="built_in">string</span> = <span class="string">&quot;123&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> message: <span class="built_in">String</span> = <span class="string">&quot;123&quot;</span>;</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<blockquote>
<p>string: 表示 ts 中的字符串类型<br>String: 表示 js 中的字符串包装类 严格来说 ts 中不应该这样写类型注解</p>
</blockquote>
<h3 id="变量的类型推断（推导）"><a href="#变量的类型推断（推导）" class="headerlink" title="变量的类型推断（推导）"></a>变量的类型推断（推导）</h3><p>在开发中，有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型，我们更希望可以通过 TypeScript 本身的特性帮助我们推断出对应的变量类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> message = <span class="string">&quot;hello&quot;</span>;</span><br><span class="line">message = <span class="number">1</span>; <span class="comment">// error</span></span><br></pre></td></tr></table></figure>

<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><h3 id="number-类型"><a href="#number-类型" class="headerlink" title="number 类型"></a>number 类型</h3><p>和 JavaScript 的 number 类型几乎相同</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num1: <span class="built_in">number</span> = <span class="number">10</span>;</span><br><span class="line"><span class="comment">// 二级制</span></span><br><span class="line"><span class="keyword">let</span> num2: <span class="built_in">number</span> = <span class="number">0b1</span>;</span><br><span class="line"><span class="comment">// 八进制</span></span><br><span class="line"><span class="keyword">let</span> num3: <span class="built_in">number</span> = <span class="number">0o7</span>;</span><br><span class="line"><span class="comment">// 十六进制</span></span><br><span class="line"><span class="keyword">let</span> num4: <span class="built_in">number</span> = <span class="number">0x15</span>;</span><br><span class="line"><span class="comment">// 小数</span></span><br><span class="line"><span class="keyword">let</span> num5: <span class="built_in">number</span> = <span class="number">10.0</span>;</span><br></pre></td></tr></table></figure>

<h3 id="boolean-类型"><a href="#boolean-类型" class="headerlink" title="boolean 类型"></a>boolean 类型</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> flag: <span class="built_in">boolean</span> = <span class="literal">true</span>;</span><br><span class="line">flag = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>

<h3 id="string-类型"><a href="#string-类型" class="headerlink" title="string 类型"></a>string 类型</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> message: <span class="built_in">string</span> = <span class="string">&quot;hello&quot;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h3><p>数组的定义方式有两种:</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> names: <span class="built_in">string</span>[] = [];</span><br><span class="line"><span class="keyword">const</span> message: <span class="built_in">Array</span>&lt;<span class="built_in">string</span>&gt; = []; <span class="comment">// 不推荐 react jsx 中有冲突</span></span><br></pre></td></tr></table></figure>

<h3 id="object-类型"><a href="#object-类型" class="headerlink" title="object 类型"></a>object 类型</h3><p>object 对象类型可以用于描述一个对象</p>
<p>但是我们不能从里面获取数据，也不能设置数据</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> info: <span class="built_in">object</span> = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;curry&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">34</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(info.age); <span class="comment">// error</span></span><br></pre></td></tr></table></figure>

<h3 id="symbol-类型"><a href="#symbol-类型" class="headerlink" title="symbol 类型"></a>symbol 类型</h3><p>可以通过 symbol 来定义相同的名称，Symbol 函数返回的是不同的值，这样可以实现在对象中添加相同属性名称的操作。</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> title1 = <span class="built_in">Symbol</span>(<span class="string">&quot;title&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> title2 = <span class="built_in">Symbol</span>(<span class="string">&quot;title&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> info = &#123;</span><br><span class="line">  [title1]: <span class="string">&quot;coder&quot;</span>,</span><br><span class="line">  [title2]: <span class="string">&quot;teacher&quot;</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="null-和-undefined"><a href="#null-和-undefined" class="headerlink" title="null 和 undefined"></a>null 和 undefined</h3><p>在 TypeScript 中，null 和 undefined 各自的类型也是 undefined 和 null，也就意味着它们既是实际的值，也是自己的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> n: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">let</span> u: <span class="literal">undefined</span> = <span class="literal">undefined</span>;</span><br></pre></td></tr></table></figure>

<h3 id="any-类型"><a href="#any-类型" class="headerlink" title="any 类型"></a>any 类型</h3><p>在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用 any 类型</p>
<ul>
<li><p>可以对 any 类型的变量进行任何的操作，包括获取不存在的属性、方法；</p>
</li>
<li><p>可以给一个 any 类型的变量赋值任何的值</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> msg: <span class="built_in">any</span> = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line">msg = <span class="number">123</span>;</span><br><span class="line">msg = <span class="literal">false</span>;</span><br><span class="line">msg = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="unknown-类型"><a href="#unknown-类型" class="headerlink" title="unknown 类型"></a>unknown 类型</h3><p>unknown 类型用于描述类型不确定的变量</p>
<p>unknown 与 any 的不同：</p>
<ul>
<li>any 类型可以赋值给任意类型</li>
<li>unknown 类型只能赋值给 any 类型和 unknown 类型</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="number">123</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;hello&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result: unknown;</span><br><span class="line"><span class="keyword">let</span> flag: <span class="built_in">boolean</span> = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">if</span> (flag) &#123;</span><br><span class="line">  result = foo();</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  result = bar();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="void-类型"><a href="#void-类型" class="headerlink" title="void 类型"></a>void 类型</h3><p>void 通常用来指定一个函数是没有返回值的，那么它的返回值就是 void 类型</p>
<ul>
<li><p>可以将 null 和 undefined 赋值给 void 类型，也就是函数可以返回 null 或者 undefined</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a: <span class="built_in">number</span>, b: <span class="built_in">number</span></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a + b);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>如果一个函数没有写任何类型，那么它默认返回值的类型就是 void 的，也可以显示的来指定返回值是 void：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a: <span class="built_in">number</span>, b: <span class="built_in">number</span></span>): <span class="title">void</span> </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a + b);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="never-类型"><a href="#never-类型" class="headerlink" title="never 类型"></a>never 类型</h3><p>never 表示永远不会发生值的类型</p>
<p>应用场景：</p>
<ul>
<li><p>一个函数中是一个死循环或者抛出一个异常，此时的函数返回值就不应该是 void 类型，而应该是 never 类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 死循环</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>): <span class="title">never</span> </span>&#123;</span><br><span class="line">  <span class="keyword">while</span> (<span class="literal">true</span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 抛出异常</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>): <span class="title">never</span> </span>&#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>假定 message 只能使用 number 和 string 另一个人想将布尔值传进来 他仅仅在形参中加入了联合类型，此时通过一个 never 类型的变量 check 则会出错 因此这样提高了代码的可维护性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleMessage</span>(<span class="params">message: <span class="built_in">number</span> | <span class="built_in">string</span> | <span class="built_in">boolean</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">switch</span> (<span class="keyword">typeof</span> message) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;string&quot;</span>:</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;789&quot;</span>);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;number&quot;</span>:</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;456&quot;</span>);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;boolean&quot;</span>:</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;123&quot;</span>);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">const</span> check: <span class="built_in">never</span> = message;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">handleMessage(<span class="string">&quot;123&quot;</span>);</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="tuple-类型"><a href="#tuple-类型" class="headerlink" title="tuple 类型"></a>tuple 类型</h3><p>tuple 元组类型表示多种元素的组合</p>
<p>tuple 和 数组的区别：</p>
<ul>
<li><p>数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）</p>
</li>
<li><p>元组中每个元素都有自己特性的类型，根据索引值获取到的值可以确定对应的类型</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组的弊端</span></span><br><span class="line"><span class="comment">// const info:any[] = [&#x27;curry&#x27;,33,&#x27;1.92&#x27;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 元组</span></span><br><span class="line"><span class="keyword">const</span> info: [<span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">string</span>] = [<span class="string">&quot;curry&quot;</span>, <span class="number">33</span>, <span class="string">&quot;1.92&quot;</span>];</span><br></pre></td></tr></table></figure>

<p>函数将元组作为返回值，在使用的时候会更加方便</p>
<p>简单实现 react 的 useState ：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useState</span>&lt;<span class="title">T</span>&gt;(<span class="params">state: T</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> currentState = state;</span><br><span class="line">  <span class="keyword">const</span> changeState = <span class="function">(<span class="params">newState: T</span>) =&gt;</span> &#123;</span><br><span class="line">    currentState = newState;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> tuple: [T, <span class="function">(<span class="params">newState: T</span>) =&gt;</span> <span class="built_in">void</span>] = [currentState, changeState];</span><br><span class="line">  <span class="keyword">return</span> tuple;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h3><p>联合类型是由两个或者多个其他类型组成的类型，表示可以是这些类型中的任何一个值</p>
<p>联合类型中的每一个类型被称之为联合成员（union’s members）</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// number | string 联合类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printId</span>(<span class="params">id: <span class="built_in">number</span> | <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> id === <span class="string">&quot;string&quot;</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(id.toUpperCase());</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(id);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">printId(<span class="number">1</span>);</span><br><span class="line">printId(<span class="string">&quot;1&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="类型别名"><a href="#类型别名" class="headerlink" title="类型别名"></a>类型别名</h3><p>通过 type 关键字，可以给对象类型起一个别名</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// type 用于定义类型别名</span></span><br><span class="line"><span class="keyword">type</span> idType = <span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">boolean</span>;</span><br><span class="line"><span class="keyword">type</span> pointType = &#123;</span><br><span class="line">  <span class="attr">x</span>: <span class="built_in">number</span>;</span><br><span class="line">  y: <span class="built_in">number</span>;</span><br><span class="line">  z?: <span class="built_in">number</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printId</span>(<span class="params">id: idType</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(id);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printPoint</span>(<span class="params">point: pointType</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(point);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">printId(<span class="string">&quot;123&quot;</span>);</span><br><span class="line">printId(<span class="number">456</span>);</span><br><span class="line"></span><br><span class="line">printPoint(&#123; <span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span> &#125;);</span><br><span class="line">printPoint(&#123; <span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span>, <span class="attr">z</span>: <span class="number">3</span> &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h3><p>有时候 TypeScript 无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions）</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> el = <span class="built_in">document</span>.getElementById(<span class="string">&quot;app&quot;</span>) <span class="keyword">as</span> HTMLImageElement;</span><br><span class="line"></span><br><span class="line">el.src = <span class="string">&quot;http://twitzz.cn&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Student</span> <span class="keyword">extends</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">studying</span>(<span class="params"></span>)</span> &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayHello</span>(<span class="params">p: Person</span>) </span>&#123;</span><br><span class="line">  (p <span class="keyword">as</span> Student).studying();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> s = <span class="keyword">new</span> Student();</span><br><span class="line">sayHello(s);</span><br></pre></td></tr></table></figure>

<h3 id="非空类型断言"><a href="#非空类型断言" class="headerlink" title="非空类型断言"></a>非空类型断言</h3><p>非空断言使用的是 ! ，表示可以确定某个标识符是有值的，跳过 ts 在编译阶段对它的检测</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printMessage</span>(<span class="params">message?: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 非空类型断言</span></span><br><span class="line">  <span class="comment">// 忽略null和undefined的情况</span></span><br><span class="line">  <span class="built_in">console</span>.log(message!.length);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="可选链"><a href="#可选链" class="headerlink" title="可选链"></a>可选链</h3><p>可选链并不是 TypeScript 独有的特性，它是 ES11（ES2020）中增加的特性</p>
<p>它的作用是当对象的属性不存在时，会短路，直接返回 undefined，如果存在，那么才会继续执行</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Person = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">  friend?: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">    age?: <span class="built_in">number</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> info: Person = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;curry&quot;</span>,</span><br><span class="line">  <span class="attr">friend</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;green&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可选链</span></span><br><span class="line"><span class="built_in">console</span>.log(info.friend?.age);</span><br></pre></td></tr></table></figure>

<h3 id="运算符"><a href="#运算符" class="headerlink" title="!!运算符"></a>!!运算符</h3><p>!!运算符的作用是隐式类型转换为 boolean 类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> message = <span class="string">&quot;hello&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> flag = !!message;</span><br></pre></td></tr></table></figure>

<h3 id="运算符-1"><a href="#运算符-1" class="headerlink" title="??运算符"></a>??运算符</h3><p>??运算符又叫空值合并操作符，当操作符的左侧是 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// let message: string | null = null;</span></span><br><span class="line"><span class="keyword">let</span> message: <span class="built_in">string</span> | <span class="literal">null</span> = <span class="string">&quot;world&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> content = message ?? <span class="string">&quot;hello&quot;</span>;</span><br><span class="line"><span class="comment">// 类似于</span></span><br><span class="line"><span class="comment">// const content = message ? message : &quot;hello&quot;;</span></span><br></pre></td></tr></table></figure>

<h3 id="字面量类型"><a href="#字面量类型" class="headerlink" title="字面量类型"></a>字面量类型</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 类型是123</span></span><br><span class="line"><span class="keyword">const</span> num = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>

<p>字面量类型的意义就是结合联合类型来使用</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Alignment = <span class="string">&quot;left&quot;</span> | <span class="string">&quot;right&quot;</span> | <span class="string">&quot;center&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> align: Alignment;</span><br><span class="line">align = <span class="string">&quot;center&quot;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="字面量推理"><a href="#字面量推理" class="headerlink" title="字面量推理"></a>字面量推理</h3><p>使用字面量推理意味着：</p>
<ul>
<li><p>该表达式中的字面类型不应被扩展（例如：不能从“hello”转换为字符串）</p>
</li>
<li><p>对象字面量获取只读属性</p>
</li>
<li><p>数组字面量成为只读元组</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Method = <span class="string">&quot;GET&quot;</span> | <span class="string">&quot;POST&quot;</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">url: <span class="built_in">string</span>, method: Method</span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Request = &#123;</span><br><span class="line">  <span class="attr">url</span>: <span class="built_in">string</span>;</span><br><span class="line">  method: Method;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字面量推理</span></span><br><span class="line"><span class="keyword">const</span> option = &#123;</span><br><span class="line">  <span class="attr">url</span>: <span class="string">&quot;www.baidu.com&quot;</span>,</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&quot;POST&quot;</span>,</span><br><span class="line">&#125; <span class="keyword">as</span> <span class="keyword">const</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> option = &#123;</span><br><span class="line">  <span class="attr">url</span>: <span class="string">&quot;www.baidu.com&quot;</span>,</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&quot;POST&quot;</span>,</span><br><span class="line">&#125;; <span class="comment">// error option.method 的类型是 string类型</span></span><br><span class="line"></span><br><span class="line">request(option.url, option.method);</span><br></pre></td></tr></table></figure>

<h3 id="类型保护（type-guard）"><a href="#类型保护（type-guard）" class="headerlink" title="类型保护（type guard）"></a>类型保护（type guard）</h3><p>常见的类型保护有以下几种：</p>
<ul>
<li><p>typeof</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> IDType = <span class="built_in">number</span> | <span class="built_in">string</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printId</span>(<span class="params">id: IDType</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(id);</span><br><span class="line">  <span class="comment">// typeof</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> id === <span class="string">&quot;string&quot;</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(id.toLowerCase());</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(id);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>if switch</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Direction = <span class="string">&quot;left&quot;</span> | <span class="string">&quot;center&quot;</span> | <span class="string">&quot;right&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printDircetion</span>(<span class="params">direction: Direction</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(direction);</span><br><span class="line">  <span class="comment">// if</span></span><br><span class="line">  <span class="keyword">if</span> (direction === <span class="string">&quot;center&quot;</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(direction);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// switch</span></span><br><span class="line">  <span class="keyword">switch</span> (direction) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;center&quot;</span>:</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>instanceof</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pritnTime</span>(<span class="params">time: <span class="built_in">string</span> | <span class="built_in">Date</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (time <span class="keyword">instanceof</span> <span class="built_in">Date</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(time.getTime());</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(time);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>in</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Fish = &#123;</span><br><span class="line">  <span class="attr">swimming</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Dog = &#123;</span><br><span class="line">  <span class="attr">running</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">walk</span>(<span class="params">animal: Fish | Dog</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 判断是否有该属性</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="string">&quot;swimming&quot;</span> <span class="keyword">in</span> animal) &#123;</span><br><span class="line">    animal.swimming();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="函数相关"><a href="#函数相关" class="headerlink" title="函数相关"></a>函数相关</h2><h3 id="函数的参数和返回值"><a href="#函数的参数和返回值" class="headerlink" title="函数的参数和返回值"></a>函数的参数和返回值</h3><p>TypeScript 允许我们指定函数的参数和返回值的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在开发中，可以不写返回值类型，它会有类型推断</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">num1: <span class="built_in">number</span>, num2: <span class="built_in">number</span></span>): <span class="title">number</span> </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="匿名函数的参数"><a href="#匿名函数的参数" class="headerlink" title="匿名函数的参数"></a>匿名函数的参数</h3><p>当一个函数出现在 TypeScript 可以确定该函数会被如何调用的地方时，该函数的参数会自动指定类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> names = [<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;cba&quot;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// item的类型是根据上下文环境推导出来的，这个时候可以不添加类型注解</span></span><br><span class="line"><span class="comment">// 上下文的函数可以不添加类型注解</span></span><br><span class="line">names.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="接受的参数为对象类型"><a href="#接受的参数为对象类型" class="headerlink" title="接受的参数为对象类型"></a>接受的参数为对象类型</h3><p>如果希望限定一个函数接受的参数是一个对象，可以使用一个对象来作为类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// point:x,y =&gt; 对象类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printPoint</span>(<span class="params">point: &#123; x: <span class="built_in">number</span>; y: <span class="built_in">number</span> &#125;</span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">printPoint(&#123; <span class="attr">x</span>: <span class="number">123</span>, <span class="attr">y</span>: <span class="number">456</span> &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="可选类型"><a href="#可选类型" class="headerlink" title="可选类型"></a>可选类型</h3><p>对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个?</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// point:x,y,z =&gt; 对象类型</span></span><br><span class="line"><span class="comment">// 问号?表示可选类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printPoint</span>(<span class="params">point: &#123; x: <span class="built_in">number</span>; y: <span class="built_in">number</span>; z?: <span class="built_in">number</span> &#125;</span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">printPoint(&#123; <span class="attr">x</span>: <span class="number">123</span>, <span class="attr">y</span>: <span class="number">456</span> &#125;);</span><br><span class="line">printPoint(&#123; <span class="attr">x</span>: <span class="number">123</span>, <span class="attr">y</span>: <span class="number">456</span>, <span class="attr">z</span>: <span class="number">190</span> &#125;);</span><br></pre></td></tr></table></figure>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/categories/">分类</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/search/">搜索</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E6%9C%89-TypeScript"><span class="toc-number">1.</span> <span class="toc-text">为什么会有 TypeScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E7%BC%BA%E5%A4%B1%E5%B8%A6%E6%9D%A5%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">类型缺失带来的问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-%E6%B7%BB%E5%8A%A0%E7%B1%BB%E5%9E%8B%E7%BA%A6%E6%9D%9F"><span class="toc-number">3.</span> <span class="toc-text">JavaScript 添加类型约束</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-TypeScript"><span class="toc-number">4.</span> <span class="toc-text">什么是 TypeScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript-%E7%9A%84%E7%BC%96%E8%AF%91%E7%8E%AF%E5%A2%83"><span class="toc-number">5.</span> <span class="toc-text">TypeScript 的编译环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript-%E7%9A%84%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="toc-number">6.</span> <span class="toc-text">TypeScript 的运行环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">7.</span> <span class="toc-text">变量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E5%A3%B0%E6%98%8E"><span class="toc-number">7.1.</span> <span class="toc-text">变量的声明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E7%B1%BB%E5%9E%8B%E6%8E%A8%E6%96%AD%EF%BC%88%E6%8E%A8%E5%AF%BC%EF%BC%89"><span class="toc-number">7.2.</span> <span class="toc-text">变量的类型推断（推导）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.</span> <span class="toc-text">数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#number-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.1.</span> <span class="toc-text">number 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#boolean-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.2.</span> <span class="toc-text">boolean 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#string-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.3.</span> <span class="toc-text">string 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.4.</span> <span class="toc-text">数组类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#object-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.5.</span> <span class="toc-text">object 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#symbol-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.6.</span> <span class="toc-text">symbol 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#null-%E5%92%8C-undefined"><span class="toc-number">8.7.</span> <span class="toc-text">null 和 undefined</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#any-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.8.</span> <span class="toc-text">any 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unknown-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.9.</span> <span class="toc-text">unknown 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#void-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.10.</span> <span class="toc-text">void 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#never-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.11.</span> <span class="toc-text">never 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#tuple-%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.12.</span> <span class="toc-text">tuple 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.13.</span> <span class="toc-text">联合类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">8.14.</span> <span class="toc-text">类型别名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">8.15.</span> <span class="toc-text">类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9D%9E%E7%A9%BA%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">8.16.</span> <span class="toc-text">非空类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E9%93%BE"><span class="toc-number">8.17.</span> <span class="toc-text">可选链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">8.18.</span> <span class="toc-text">!!运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6-1"><span class="toc-number">8.19.</span> <span class="toc-text">??运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E7%B1%BB%E5%9E%8B"><span class="toc-number">8.20.</span> <span class="toc-text">字面量类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E6%8E%A8%E7%90%86"><span class="toc-number">8.21.</span> <span class="toc-text">字面量推理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E4%BF%9D%E6%8A%A4%EF%BC%88type-guard%EF%BC%89"><span class="toc-number">8.22.</span> <span class="toc-text">类型保护（type guard）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9B%B8%E5%85%B3"><span class="toc-number">9.</span> <span class="toc-text">函数相关</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E5%92%8C%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="toc-number">9.1.</span> <span class="toc-text">函数的参数和返回值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-number">9.2.</span> <span class="toc-text">匿名函数的参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%97%E7%9A%84%E5%8F%82%E6%95%B0%E4%B8%BA%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.3.</span> <span class="toc-text">接受的参数为对象类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.4.</span> <span class="toc-text">可选类型</span></a></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&text=TypeScript 入门指南"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&is_video=false&description=TypeScript 入门指南"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=TypeScript 入门指南&body=Check out this article: https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&title=TypeScript 入门指南"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&name=TypeScript 入门指南&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://danyuan30.gitee.io/2022/02/05/TypeScript/tutorial/&t=TypeScript 入门指南"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy;
    
    
    2021-2022
    柯里的语法糖
  </div>
  <div class="footer-right">
    <nav>
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/tags/">标签</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> 




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> 
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板!\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "复制成功!");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

<!-- Cloudflare Analytics -->

<!-- Umami Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

</body>
</html>
